<template>
	<view class="container">
		<view class="logo-section">
			<image class="logo" src="../../static/default/254x254.ico" mode="aspectFit"></image>
			<text class="app-name">优贷云</text>
		</view>
		
		<view class="form-section">
			<view class="form-item">
				<text class="icon">📱</text>
				<input 
					type="number"
					v-model="form.phone"
					placeholder="请输入手机号"
					maxlength="11"
				/>
			</view>
			
			<view class="form-item">
				<text class="icon">🔒</text>
				<input 
					:type="showPassword ? 'text' : 'password'"
					v-model="form.password"
					placeholder="请输入密码"
					maxlength="20"
				/>
				<text class="eye-icon" @click="showPassword = !showPassword">
					{{ showPassword ? '👁️' : '👁️‍🗨️' }}
				</text>
			</view>
			
			<view class="form-item verification" v-if="false">
				<text class="icon">🔑</text>
				<input 
					type="number"
					v-model="form.code"
					placeholder="请输入验证码"
					maxlength="6"
				/>
				<text 
					class="send-code"
					:class="{ disabled: counting }"
					@click="handleSendCode"
				>
					{{ counting ? `${countdown}s` : '获取验证码' }}
				</text>
			</view>
		</view>
		
		<view class="action-section">
			<button 
				class="login-btn"
				:disabled="!canSubmit"
				:class="{ disabled: !canSubmit }"
				@click="handleLogin"
			>
				登录
			</button>
			
			<view class="other-actions">
				<text @click="handleNavigate('/pages/login/register')">注册账号</text>
				<text @click="handleNavigate('/pages/login/forgot')">忘记密码</text>
			</view>
		</view>
		
		<view class="agreement">
			<checkbox-group @change="handleAgreementChange">
				<checkbox value="agreed" :checked="isAgreed" color="#4A90E2" />
				<text class="agreement-text">
					我已阅读并同意
					<text class="link" @click="handleNavigate('/pages/common/agreement')">《用户协议》</text>
					和
					<text class="link" @click="handleNavigate('/pages/common/privacy')">《隐私政策》</text>
				</text>
			</checkbox-group>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import request from "@/common/request.js"
import { STORAGE_KEY } from '../../common/config';
const form = ref({
	phone: '',
	password: '',
	code: ''
})

const showPassword = ref(false)
const isAgreed = ref(false)
const counting = ref(false)
const countdown = ref(60)
const showAgreement = ref(false)
const showPrivacy = ref(false)

// 验证手机号格式
const isValidPhone = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.value.phone)
})

// 验证表单是否可提交
const canSubmit = computed(() => {
	return isValidPhone.value && 
		form.value.password && 
		// form.value.code && 
		isAgreed.value
})

// 发送验证码
const handleSendCode = () => {
	if (counting.value || !isValidPhone.value) return
	
	counting.value = true
	countdown.value = 60
	
	const timer = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
			clearInterval(timer)
			counting.value = false
		}
	}, 1000)
	
	// 模拟发送验证码
	uni.showToast({
		title: '验证码已发送',
		icon: 'success'
	})
}

// 处理登录
const handleLogin = () => {
	if (!canSubmit.value) return
	
	// 模拟登录过程
	uni.showLoading({
		title: '登录中...'
	})
	
	setTimeout(() => {
		uni.hideLoading()
		
		request.post("api/user/login/", form.value, {success: "登录成功"}).then(res => {
			uni.setStorageSync(STORAGE_KEY.USER_INFO, JSON.stringify(res.data))
		setTimeout(() => {	uni.switchTab({
				url:"/pages/index/index"
			})}, 1200)
		})
		
		// 保存用户信息  18171759943
		
	}, 2000)
}

// 处理协议勾选
const handleAgreementChange = (e) => {
	isAgreed.value = e.detail.value.length > 0
}

// 页面跳转
const handleNavigate = (url) => {
	uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #fff;
	padding: 60rpx 40rpx;
}

.logo-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 80rpx;
	
	.logo {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 20rpx;
	}
	
	.app-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.form-section {
	margin-bottom: 60rpx;
	
	.form-item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		padding: 20rpx 0;
		margin-bottom: 30rpx;
		
		.icon {
			font-size: 40rpx;
			margin-right: 20rpx;
		}
		
		input {
			flex: 1;
			font-size: 32rpx;
		}
		
		.eye-icon {
			font-size: 40rpx;
			padding: 0 20rpx;
		}
		
		&.verification {
			.send-code {
				font-size: 28rpx;
				color: #4A90E2;
				padding: 0 20rpx;
				
				&.disabled {
					color: #999;
				}
			}
		}
	}
}

.action-section {
	margin-bottom: 40rpx;
	
	.login-btn {
		background-color: #4A90E2;
		color: #fff;
		border-radius: 45rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		margin-bottom: 30rpx;
		
		&.disabled {
			background-color: #ccc;
		}
	}
	
	.other-actions {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		
		text {
			font-size: 28rpx;
			color: #666;
		}
	}
}

.agreement {
	text-align: center;
	
	.agreement-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 10rpx;
		
		.link {
			color: #4A90E2;
		}
	}
}
</style> 